import { Button, Drawer, Form, Input, Select, Space } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { useToggle } from 'react-use';
import ContentWrapper from '../../../component/contentWrapper';
import PageTable from '../../../component/pageTable/pageTable';
import IPageInterface from '../../../interface/pageInterface';
import EquipmentRecordEdit from '../edit';
import './index.less'

interface IEquipmentRecordProps {

}

const EquipmentRecord: React.FC<IEquipmentRecordProps> = (props) => {
    const [visible, setVisible] = useToggle(false);
    return (
        <ContentWrapper gap={16} >
            <Space>
                <span>设备名称：</span>
                <Input placeholder="输入设备名称" />
                <span>设备组：</span>
                <Select style={{ width: 150 }}  defaultValue="1"  >
                    <Select.Option value="1" >
                        中国钢铁
                    </Select.Option>
                </Select>
                <Button type="primary" >搜索</Button>
            </Space>
            <PageTable
                columns={[
                    {
                        title: "设备ID",
                        render: () => <div>123456789</div>
                    },
                    {
                        title: "设备名称",
                        render: () => <div>长城门禁温度计</div>
                    },
                    {
                        title: "日志",
                        render: () => <div>温度变化：35°</div>
                    },
                    {
                        title: "报警状态",
                        render: () => <div>正常</div>
                    },
                    {
                        title: "发生时间",
                        render: () => <div>2017-11-11</div>
                    },
                    {
                        render: () => {
                            return (
                                <div>
                                    <Button type="link" onClick={setVisible} size="small" >详细</Button>
                                </div>
                            )
                        }
                    },


                ]}
                func={async (pageNo, pageSize) => {
                    return { total: 20, data: [1, 2, 3, 4, 5] }
                }}
            />
        </ContentWrapper>
    );
}

const EquipmentRecordPage: IPageInterface<IEquipmentRecordProps> = {
    title: "设备运行状态",
    path: "/equipment/record",
    // group: "设备管理",
    component: EquipmentRecord
}

export default EquipmentRecordPage;